解决vue-router路由拦截造成死循环问题
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置const router = new Router({routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, children: [{...
2024-01-10
vue项目中router路由配置
介绍路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》安装本地环境安装路由插件vue-router： cnpm install vue-router --save-dev 配置两种配置方法：在main.js中 || 在src/router文件夹下的index.js中这里只说在src/router/index.js中引入：import Vue from 'vue'import Router from 'vue-rou...
2024-01-10
vue-router中使用EventBus传值需要注意到的问题
最近负责开发一个视频相关的项目，要用到vue-router，同时涉及到一些共有状态管理，但是少量的状态又不想用vuex，于是用到了EventBus，一般来说， 我们用EventBus的步骤如下：首先新建一个js用来创建我们的EventBus，如Bus.js123import Vue from 'vue'; ...export default new Vue();接着，我们在需要的地方...
2024-01-10
对 Vue-Router 进行单元测试的方法
由于路由通常会把多个组件牵扯到一起操作，所以一般对其的测试都在 端到端/集成 阶段进行，处于测试金字塔的上层。不过，做一些路由的单元测试还是大有益处的。对于与路由交互的组件，有两种测试方式：使用一个真正的 router 实例mock 掉 $route 和 $router 全局对象因为大多数 Vue 应用用的都...
2024-01-10
vue-router怎么动态配置，比如根据用户权限不同显示路由
1、vue-router怎么动态配置，比如根据用户权限不同显示路由如上图，我想根据用户权限不同，动态添加删除菜单下面是路由配置const routes = [ { path: '/', component: Home, name: '系统管理', iconCls: 'el-icon-setting', children: [ { path: '/Page12', component: Page12, name: '组织机构' }, { path: '/...
2024-01-10
vue-router路由导航守卫中next控制实现
使用 vue-router 的导航守卫钩子函数，某些钩子函数可以让开发者根据业务逻辑，控制是否进行下一步，或者进入到指定的路由。例如，后台管理页面，会在进入路由前，进行必要登录、权限判断，来决定去往哪个路由，以下是伪代码：// 全局导航守卫router.beforEach((to, from, next) => {if('no login'){next(...
2024-01-10
请问使用vue-router与v-show分别实现选项卡有什么区别？
我们开发项目，无论是后台管理系统，还是移动应用，经常会使用到各式各样类似选项卡的切换组件，如下：1、管理后台：2、选项卡：3、移动端底部tabber:问题如下：1、实现这种类选项卡组件有2中方法：分别是 vue-router的嵌套路由 和 v-show, 请问2种实现有什么区别（个人看不出区别），来回切换时，能否缓存原本查看的内容呢？什么时候使用vue-router的嵌套路由，什么时候使用v-sh...
2024-03-14
Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save2.在首页index.html中引入百度地图: <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script> 我申请的**为 ：3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD3.在显示地图的组件中 template 中： <div class="baidumap" id="a...
2024-01-10
vue-router 基础
安装NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)如果使用全局的 script 标签，则无须如此（手动安装）。开始用Vue.js+vue-router创建单页应用，是非常简单的。使用Vue.js,我们已...
2024-01-10
基于vue-cli构建vue-router的入门级demo
本案列仅针对刚刚入门vue学习的伙伴，博主也是刚刚在学基于vue-cli搭建脚手架项目，对于前端大牛，可以移步。快速搭建vue-cli环境如何搭建基于vue-cli项目，这里不再叙述，如果不会的伙伴可以自己百度。项目搭建完成后，基本文件目录如下：打开我们刚刚创建的my-project文件夹，这里对文件夹下的...
2024-01-10
react16与react15之间的区别
项目中我一般用的还是react15的比较多，偶尔接触react16，目前使用的大多是生命周期的区别，16新增了几个生命周期。static getDerivedStateFromProps：用于代替componentReceiveProps。是个静态方法。父组件传入子组件的属性更新时，同步更新子组件state。B的a属性值是state，会变化新值和旧值不同时，返回新值更...
2024-01-10React和Vue中监听变量变化的方法
React 中本地调试React代码的方法yarn build场景假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听， getDerivedSta...
2024-01-10
你不知道的React 和 Vue 的20个区别【源码层面】
前言面试竞争力越来越大，是时候撸一波Vue和React源码啦； 本文从20个层面来对比Vue和React的源码区别； 如果需要了解API的区别，请戳： Vue 开发必须知道的 36 个技巧 React 开发必须知道的 34 个技巧文章源码：请戳，原创码字不易，欢迎star！1.Vue和React源码区别1.1 Vue源码来张Vue源码编译过程图图...
2024-01-10
react/vue 组件设计方法/原则
网上看到了好多篇 react/vue 组件设计方法/原则 ，内容都是雷同（指不该相同而相同）。 我深恶痛绝，并深刻检讨自己，意识到普及互联网知识已经迫在眉睫，绝不容许有人浑水摸鱼。在短暂的失落和悲怆过后，这肩负振兴祖国互联网知识的重任，舍我其谁？ 我集百家之长于一身，取其精华去...
2024-01-10
在项目vue中使用echarts的操作步骤
1.在组件中创建该模块<template> <div id = "testChart"></div></template>2.导入echarts前提是：已经在项目中配置过echarts在<script></script>中导入echarts<script>import {echartInit} from "../../../utils/echartUtils"</script>3.初始化该模块 export default { name: 'Test', //vue该组件名称Test.vue moun...
2024-01-10
【转】vue中动态设置meta标签和title标签
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮，所有就需要手动设置meta标签，标题和内容//router内的设置{ path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name...
2024-01-10详解从react转职到vue开发的项目准备
前言首先，为什么我需要做这个项目准备工作呢？因为常年习惯React开发的我，最近突然接手了一个Vue项目，而之前基本没有过Vue的实践，这么突兀让还在沉溺于React开发的我进行Vue开发，甚是不习惯，那自然我需要想办法让Vue开发尽量与React相似，这样大概让自己在开发过程中更得心应手吧。组件开...
2024-01-10
React、Vue浅析
关注前端的同学都了解，React和Vue是目前应用很广泛的两个前端框架。React是由Facebook开发的，Vue起初则是由google一名程序员尤雨溪开发的。截止到目前github上显示，React的Star数为87422，Vue的为78523，数据差距越来越小。两个框架国内外使用概况如图1所示： 图1 国外前端框架使用概况 ...
2024-01-10
在vue中使用echars实现上浮与下钻效果
第一步：在vue项目中安装echarsnpm i echars -S第二步:main.js配置 这里是全局引入//引入echarsimport echarts from 'echarts'Vue.prototype.$echarts = echarts第三步直接上代码<template> <div id="container"> <header>浙江省echars地图</header> <div id="echarsMap"></div> </div></template><script>//引入jso...
2024-01-10
请问3个vuejs里面的$refs有什么区别？
第三个是我自己写的。前2个是模板里面的。请问第三个为什么和前2个长相不同？也无法调用如图：回答前两个是 Vue 组件，后一个是 HTML DOM 元素。...
2024-01-10
黑马vue---17、vue中通过属性绑定绑定style行内样式
一、总结一句话总结：如果属性名中带有短线必须加引号，比如： h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }h1 :style="styleObj1"二、内容在总结中1、使用内联样式### 使用内联样式1. 直接在元素上通过 `:style` 的形式，书写样式对象```<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</...
2024-01-10
玩转vue的slot内容分发
vue的内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，比如下拉loading，下拉loading只是中间内容是动态的，而拉到底部都会触发拉取更多内容的操作，因此我们可以把下拉loading做成一个有slot的插件。单个Slot在children这个标签里面放Dom，Vue不会理...
2024-01-10
vue 底部bottomnav
<template> <div > <div class="tabBar"> <div class="menu"><p class="cont"> <router-link to='/'><img src="./img/tabBar1.png" alt="" class="src" height="47px" ></router-link><span v-bind:class="{active:routerCurrent==1}"> 首页</span> </p></div> <div c...
2024-01-10Vue-treeselect 父子关系不强关联设置？
vue-treeselect 树形选择组件，如何让父子关系不强关联，比如：选中父节点，子节点不选中，选中子节点，父节点补选中？如何设置不强关联回答：官网就有一个:<div> <treeselect :multiple="true" :options="options" :flat="true" :sort-value-by="sortValueBy" ...
2024-03-04
一起学vue指令之v-html
一起学 vue指令 v-html 指令可看作标签属性某些情况下，我们点击百度搜索下一页，服务器应该就返回下一页的数据页面，包含其他资源链接等。返回的数据的本质是一个含HTML代码的字符串。以百度链接为例...
2024-01-10
使用slot-scope复制vue中slot内容
有时候我们的vue组件需要复制使用者传递的内容。比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果使用者关注轮播内容的静态效果，组件负责让其滚动起来组件:<div class="horse-lamp"> <div class="lamp"> <slot name="lamps"></slot> </div> <div class="lamp"> ...
2024-01-10
vue 简易toDoList
vue+bootstrap简易响应式任务管理表：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no"/> <link rel="stylesheet" type="te...
2024-01-10
vue--todolist的实现
简单示例：<template> <div id="Home"> <v-header></v-header> <hr> {{title}} <br> <p><input type="text" v-model="todo" /> <button @click="doAdd()">添加</button></p> <p v-for="(x,k) in list">{{x}}---- <button @click="removeData(k)">删除</button><...
2024-01-10
详解Vue slot插槽
1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件（传的是HTML格式）。父组件App:子组件Category：在父组件或者子组件里都可以给插槽中的内容设置样式，效果一样作用域插槽：1.理解:数据在组件的自身（Category），但根据数据生成的结构需要...
2024-01-10
用vue框架的基本原理，简单实现一个todo-list
前言最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监...
2024-01-10
